<template>
  <div>
    <h3 style="margin-top: 39px; margin-left: 32px">新建服务</h3>
    <div class="order-title">
      <label for="title">服务标题:</label>
      <input id="title" type="text" placeholder="请输入服务标题" v-model="param.title" />
    </div>

    <div class="order-time">
      <label for="time">时间范围:</label>
      <div style="display: flex; flex-wrap: wrap; margin-left: 8px">
        <el-date-picker class="photoTime" v-model="param.begin" style="width: 232px; margin-right: 8px" type="datetime" :picker-options="{
            disabledDate: (e) => {
              const end = new Date(param.end);
              e.setHours(0, 0, 0,0);
              end.setHours(0, 0, 0,0);
              return param.end && e.getTime() > end.getTime();
            },
          }" value-format="yyyy-MM-dd HH:mm:ss" placeholder="服务开始时间">
        </el-date-picker>
        <el-date-picker class="photoTime" v-model="param.end" style="width: 232px" type="datetime" :picker-options="{
            disabledDate: (e) => {
              const begin = new Date(param.begin);
              e.setHours(0, 0, 0,0);
              begin.setHours(0, 0, 0,0);
              return param.begin && e.getTime() < begin.getTime();
            },
          }" value-format="yyyy-MM-dd HH:mm:ss" placeholder="服务结束时间">
        </el-date-picker>
      </div>
    </div>

    <div class="order-title" style="display: flex; align-items: center">
      <div>
        <label for="location">服务地点:</label>
        <input id="location" type="text" placeholder="请输入服务地点" v-model="param.place" class="location" />
      </div>
      <div style="
          display: flex;
          align-items: center;
          margin-left: 20px;
          cursor: pointer;
        " onclick="window.open('https://map.qq.com/')">
        <img src="@/assets/order/MapDraw.png" style="width: 16px; height: 16px; margin-right: 8px" alt="" />
        <span style="font-weight: 400; color: #4169E1; font-size: 12px">打开地图</span>
      </div>
    </div>

    <div class="order-location">
      <div class="phoneLeft">
        <label for="scene">服务场景:</label>
        <el-select v-model="selectedTask" placeholder="请选择场景" @change="handleTask" class="order-grade" filterable>
          <el-option v-for="tags in channelList" :label="tags.channelNo" :value="tags.channelNo"></el-option>
        </el-select>
      </div>
    </div>

    <div class="imgPro">
      <div>
        <label for="mainImg">服务群:</label>
      </div>
      <div class="mainImg">
        <el-upload ref="upload" name="files" :action="UPLOAD_URL"  :show-file-list="false" :on-success="handleSuccess" >
          <img v-if="imgStr" :src="imgStr" style="width: 120px;height: 120px">
          <div v-else class="custom-upload-content">
            <i class="el-icon-plus" style="font-size: 45px;color: #999999;"></i>
            <div style="margin-top: 10px;font-weight: 400;color: #999999;font-size: 14px;">点击上传二维码</div>
          </div>
        </el-upload>
      </div>
    </div>

    <div class="order-location">
      <div>
        <label for="city">所在城市:</label>
        <input id="city" type="text" placeholder="请输入城市" v-model="param.city" class="location" />
      </div>
  
    </div>
    <div class="order-type">
      <label for="range">服务范围:</label>
      <input type="radio" id="all" name="all" value="0" v-model="param.dispatch" /><span>全部</span>
      <input type="radio" id="only" name="only" value="1" v-model="param.dispatch" style="margin-left: 40px" /><span>只包含</span>
      <input type="radio" id="exclude" name="exclude" value="2" v-model="param.dispatch" style="margin-left: 40px" /><span>不包含</span>
    </div>

    <!-- 新增下拉框部分 -->
    <div :class="[
        'product-select',
        param.dispatch == 0 ? 'product-select-disabled' : '',
      ]">
      <label for="camera" style="color: #666666; font-size: 14px">标签:</label>
      <el-select v-model="selectedProduct" :disabled="tagsDisabled" multiple filterable allow-create default-first-option placeholder="请选择标签" @change="handleProductChange" class="phoneTAG">
        <!-- 动态生成或静态列出你的商品选项 -->
        <el-option v-for="tag in tagsList" :label="tag" :value="tag">
        </el-option>
      </el-select>
    </div>
    <div class="order-info">
      <label for="userNo">手机号码:</label>
      <input type="text" id="phone" v-model="param.phone" placeholder="请输入手机号码" />
    </div>

    <div class="buttonPro">
      <button @click="submitForm" class="subButton"><span>提交</span></button>
    </div>
  </div>
</template>

<script>
import { getSceneTags, addMission } from "@/api/order";
import { getTagList } from "@/api/comman";
import { getAllChannel } from "@/api/custom";
import { UPLOAD_URL } from "@/utils/systemConstants";

export default {
  name: "NewOrder",
  data() {
    return {
      UPLOAD_URL,
      param: {
        title: "",
        begin: "",
        end: "",
        place: "",
        scene: "",
        qrcode: "",
        city: "",
        dispatch: 0,
        userNo: "",
        phone: "",
        scope:""
      },
      uploadedImages: [],
      selectedProduct: "",
      selectedAfterOrder: "",
      selectedPhoto: "",
      selectedCamera: "",
      tagsList: [],
      selectedTask: "",
      tagsAllList: "",
      channelList: [],
      imgStr: "",
      tagsDisabled: true,
      afterDisable: true,
      isBlock: false,
    };
  },
  activated() {
    this.getSceneTags();
    this.getTagList();
    this.getAllChannel();
  },
  watch: {
    "param.userNo"(newValue){
      const num = Number(newValue);
      if( num < -2147483648  || num > 2147483647 )
      return this.$message.error('请输入正确的编号')
    },

    "param.dispatch"(newValue) {
      if (newValue == 0) {
        this.selectedProduct = []; // 清空选中的商品
        this.tagsDisabled = true;
      } else {
        this.tagsDisabled = false;
      }
    },
    "param.productionInfo.dispatch"(newValue) {
      if (newValue == 0) {
        this.selectedAfterOrder = []; // 清空选中的商品
        this.afterDisable = true;
      } else {
        this.afterDisable = false;
      }
    },
  },
  methods: {
    handleSaveDataToStorage() {
      sessionStorage.setItem("addOrder", this.param)
    },
    allowOnlyNumbers(event) {
      // 只允许输入数字和退格键
      const keyCode = event.keyCode || event.which;

      // 阻止负号的输入
      if (keyCode === 45) { // 45 是负号的 keyCode
        event.preventDefault();
        return false;
      }
      // 允许数字、退格键、删除键、左右箭头键
      return (keyCode >= 48 && keyCode <= 57) || keyCode === 8 || keyCode === 46 || keyCode === 37 || keyCode === 39;
    },
    isMobile(mobile) {
      const reg = /^\+?[1-9]\d{1,14}$/;
      return reg.test(mobile);
    },
    handleProductChange(val) {
      this.param.scope = val.join(",");
    },
    handleChange(val) {
      this.param.productionInfo.scope = val.join(",");
    },

    handlePhotoChange(val) {
      this.param.photo = val;
    },
    handleCameraChange(val) {
      this.param.camera = val;
    },
    handleTask(val) {
      this.param.scene = val;
    },

    cancel() {
      console.log("取消操作");
    },
    submitForm() {
      if(this.isBlock){ return; }

      if (this.param.title == null || this.param.title == "")
        return this.$message.error("请输入服务名称");
      if (this.param.begin == null || this.param.begin == "")
        return this.$message.error("请输入开始时间");
      if (this.param.end == null || this.param.end == "")
        return this.$message.error("请输入开始时间");
      if (this.param.place == null || this.param.place == "")
        return this.$message.error("请输入地点");
      if (this.param.scene == null || this.param.scene == "")
        return this.$message.error("请输入任务场景");
      if (this.imgStr == null || this.imgStr == "")
        return this.$message.error("请输入服务群");
      if (this.param.city == null || this.param.city == "")
        return this.$message.error("请输入城市");
      if (this.param.phone == null || this.param.phone == "")
        return this.$message.error("请输入手机号码");
      if (!this.isMobile(this.param.phone)) {
        return this.$message.error("请输入正确的手机格式");
      }
      if(Number(this.param.userNo) > 2147483647){
        return this.$message.error('请输入正确的编号')
      }
      this.isBlock = true;
      const requestData = {
        title: this.param.title,
        begin: this.param.begin,
        end: this.param.end,
        place: this.param.place,
        scene: this.param.scene,
        qrcode: this.imgStr,
        city: this.param.city,
        dispatch: this.param.dispatch,
        phone: this.param.phone,
        scope: this.param.scope
      };
      console.log(requestData)
      addMission(requestData).then((res) => {
        console.log("调用接口");
        if (res) {
          this.$message.success("操作成功");
          this.$router.push({ name: "Order" });
          this.handleResetForm()
        }
        this.isBlock = false;
      }).catch(()=>{
        this.isBlock = false;
      })
    },
    handleResetForm() {
      this.param = Object.assign({},{
        title: "",
        begin: "",
        end: "",
        place: "",
        scene: "",
        qrcode: "",
        city: "",
        score: null,
        total: null,
        pay: null,
        number: null,
        kind: null,
        photo: null,
        camera: null,
        dispatch: 0,
        scope: "",
        productions: null,
        auto: null,
        productionInfo: {
          score: null,
          dispatch: 0,
          scope: "",
          require: "",
        },
        userNo: "",
        agentNo: "",
        agentMoney: null,
        phone: "",
      })
      this.selectedTask = ""
      this.orderOne = false
      this.orderTwo = false
      this.selectedCamera = ""
      this.selectedPhoto = ""
      this.imgStr = ""
    },
    handleRemove(file) {
      this.imgStr = "";
    },
    handleSuccess(res) {
      if(res.code === 200000){
        this.imgStr = res.data;
      }else{
        return this.$message.error('上传失败')
      }
    },
    getSceneTags() {
      getSceneTags().then((res) => {
        if (res) {
          this.tagsList = res;
        }
      });
    },
    getTagList() {
      getTagList({ kind: "cameramen" }).then((res) => {
        if (res) {
          this.tagsAllList = res;
        }
      });
    },
    getAllChannel() {
      getAllChannel().then((res) => {
        if (res) {
          this.channelList = res;
        }
      });
    },
  },
};
</script>

<style scoped>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.textClass::placeholder{
  color: #999999;
}
.custom-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.el-icon-plus {
  margin-top: 30px;
}
.upload-text {
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  margin-top: -55px;
}
.el-upload--picture-card i {
  font-size: 45px;
}
@media (max-width: 768px) {
  .order-title input {
    width: 190px !important;
  }
  .photoTime {
    width: 140px !important;
  }
  .location {
    width: 100px !important;
  }
  .order-grade {
    width: 110px !important;
  }
  .phoneLeft {
    margin-left: 10px !important;
  }
  .mapClass {
    width: 100px !important;
  }
  .product-task input {
    width: 100px !important;
  }
  .order-Radius input {
    width: 16px !important;
  }
  .order-Radius {
    margin-left: 10px !important;
  }
  .phoneTAG {
    width: 280px !important;
  }
  .order-info input {
    width: 160px !important;
  }
  .order-text textarea {
    width: 280px !important;
  }
  .radioPhone{
    margin-left: 10px !important;
  }

}
/* 后期需求 */
.order-text {
  margin-left: 46px;
  display: flex;
  margin-top: 45px;
}
.order-text textarea {
  width: 440px;
  height: 120px;
  margin-left: 8px;
  padding: 13px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #cccccc;
  margin-top: -13px;
}

/* 摄影师 */
.product-select select {
  width: 440px;
  height: 40px;
  margin-left: 8px;
}
.product-select-disabled {
  opacity: 50%;
}
.product-select .el-select {
  width: 440px;
  margin-left: 8px;
}
.product-select .el-select .el-input__inner {
  border-color: #cccccc;
}

.product-select {
  margin-top: 25px;
  margin-left: 74px;
}
/* 摄像 */
.order-camera {
  margin-top: 24px;
  display: flex;
  margin-left: 46px;
}
.order-grade {
  margin-left: 8px;
  width: 232px;
  height: 40px;
}

/* 任务 */
.product-task {
  margin-left: 46px;
  margin-top: 24px;
  display: flex;
}
.product-task input {
  width: 232px;
  height: 40px;
  margin-left: 8px;
}
/* 服务 */
.order-money {
  margin-left: 32px;
  margin-top: 24px;
  display: flex;
}
/* 任务地点，任务场景 */
.order-location {
  margin-top: 24px;
  display: flex;
  margin-left: 46px;
}
/* 时间样式 */
.order-time {
  margin-top: 24px;
  display: flex;
  align-items: center;
  margin-left: 46px;
}
.location {
  width: 232px;
  height: 40px;
  margin-left: 8px;
}
.mapClass {
  width: 232px;
  height: 40px;
  margin-left: 8px;
}

/* 按钮 */
.cleButton {
  width: 108px;
  height: 38px;
  margin-left: 32px;
  background-color: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #4169E1;
  span {
    color: #4169E1;
  }
}
.cleButton:active {
  background-color: #ffffff;
}
.cleButton:hover {
  background-color: #ffffff;
}
.subButton {
  width: 108px;
  height: 38px;
  background-color: #4169E1;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #4169E1;
  cursor: pointer;
  span {
    color: #ffffff;
  }
}
.subButton:active {
  background-color: #4169E1;
}
.buttonPro {
  margin-top: 48px;
  margin-left: 48px;
  margin-bottom: 40px;
}

/* 服务群 */
.imgPro {
  display: flex;
  margin-top: 44px;
  margin-left: 60px;
}
.mainImg {
  margin-left: 8px;
  margin-top: -20px;
}

/* 用户编号 */
.order-info {
  margin-top: 32px;
  margin-left: 46px;
}
.order-info input {
  margin-left: 8px;
  width: 232px;
  height: 40px;
}

.order-coin {
  margin-top: 32px;
  margin-left: 32px;
}
.order-coin input {
  margin-left: 8px;
  width: 232px;
  height: 40px;
}

/* 服务类型 */
.order-Radius {
  margin-left: 40px;
  display: flex;
  align-items: center;
}

.order-Radius input {
  margin-left: 8px;
  width: 16px;
  height: 16px;
}
.order-Radius span {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-left: 6px;
}

/* 派单范围*/
.order-type {
  margin-top: 37px;
  margin-left: 46px;
  display: flex;
}
.order-type input {
  margin-left: 8px;
  width: 16px;
  height: 16px;
}
.order-type span {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-left: 6px;
}
/* 标题 */
.order-title input {
  width: 440px;
  height: 40px;
  margin-left: 8px;
}

/* 标题样式 */
.order-title {
  margin-left: 46px;
  margin-top: 31px;
}
</style>
<style>
/* 上传图片的边框 */
.el-upload {
  width: 120px;
  height: 120px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #cccccc;
}
/* 全局input的样式设置 */
input {
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #cccccc;
  padding-left: 6px;
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 14px;
  padding: 16px;
}
textarea {
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 14px;
  padding: 16px;
}
/* 全局placeholder的样式设置 */
input::placeholder {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
/* 全局label的样式设置 */
label {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 14px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
/* 自定义图片卡片的大小 */
.el-upload-list--picture-card .el-upload-list__item {
  width: 120px !important; /* 自定义宽度 */
  height: 120px !important; /* 自定义高度 */
}
.el-select .el-input__inner {
  height: 40px; /* 将高度设置为你想要的值，例如48px */
  line-height: 40px; /* 保证文本垂直居中 */
}
.el-input--medium .el-input__inner {
  height: 40px; /* 设置你希望的高度，例如48px */
  line-height: 40px; /* 保证文本垂直居中 */
}
input[type="radio"]:checked {
  accent-color: #4169E1; /* 更改为你想要的颜色 */
}
</style>
